import { memo, useRef } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { useGetOrganizationInfo } from "../../service/organization";
import OrgDetail_head from "./cpms/orgDetail_head";
import { Divider } from "antd-mobile";
import OrgDetail_swiper from "./cpms/orgDetail_swiper";
import OrgDetail_desc from "./cpms/orgDetail_desc";
import OrgDetail_recommend from "./cpms/orgDetail_recommend";
import DataDisplay_content from "../../baseUI/dataDisplay_content/idnex";
import { routeItmeType } from "../../router";

const OrgDetail = memo(() => {
  const params = useParams();
  const orgId = useRef(params.id);
  const nav = useNavigate();
  const { data, loading } = useGetOrganizationInfo(orgId.current!);
  return (
    <DataDisplay_content
      loading={loading}
      title={data?.name}
      returnClick={() => nav(`/${routeItmeType.HOME}`)}
    >
      <OrgDetail_head data={data} />
      <Divider />
      <OrgDetail_swiper data={data} />
      <Divider />
      <OrgDetail_desc data={data} />
      <Divider />
      <OrgDetail_recommend orgId={orgId.current as string} />
    </DataDisplay_content>
  );
});

export default OrgDetail;
